<template>
  <div class="dashboard-container">
    <!-- 功能组件 -->
    <headFunction :Function='Function'  @search='search' @add='add'></headFunction>
    <!-- 功能组件 -->
    <div class="main">
      <!-- 表格 -->
      <el-alert type="info" style="font-size: 32px;">
        <i style="font-size: 16px;" class="el-icon-info"></i> 共 {{ this.page.counts}} 条数据
      </el-alert>
       <!-- 表格 -->
       <!-- 表格 -->
      <el-table
      :data="listS"
      style="width: 100%;
      background-color: #cca7a7; "
      >
        <el-table-column
          type="index"
          label="顺序"
          align="center"
          width="60">
        </el-table-column>
        <el-table-column
          prop="id"
          label="序号"
          align="center"
          width="80">
        </el-table-column>
        <el-table-column
          prop="email"
          label="邮箱"
            align="center"
          width="180">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="电话"
            align="center"
            width="140">
        </el-table-column>
        <el-table-column
          prop="username"
          label="用户名"
            align="center"
            width="160">
        </el-table-column>
        <el-table-column
          prop="permission_group_title"
          label="权限组名称"
            align="center"
            width="140">
        </el-table-column>
        <el-table-column
          prop="role"
          label="角色"
            align="center"
            width="100">
        </el-table-column>
          <el-table-column
            align="center"
          label="操作">
            <template slot-scope={row} v-if="row.id!==2">
              <el-button type="primary" plain icon="el-icon-edit" circle @click="edit(row.id)"></el-button>
              <el-button type="danger" plain icon="el-icon-delete" circle @click="del(row)"></el-button>
            </template>
        </el-table-column>
      </el-table>
       <!-- 表格 -->
        <!-- 分页 -->
        <page-tool :page='page' @handleCurrentChange='handleCurrentChange' @handleSizeChange='handleSizeChange'></page-tool>
      <!-- 分页 -->
      <!-- 表单 -->
      <user-add ref="editS"   :FunctionName="FunctionName" @Refresh='Refresh'></user-add>
      <!-- 表单 -->
    </div>
  </div>
</template>

<script>
// 头部功能组件
import headFunction from '../components/headFunction.vue'
import { list, remove } from '@/api/base/users.js'
import pageTool from '../components/page-tool.vue'
import userAdd from '../components/user-add.vue'
export default {
  name: 'base-users',
  components: {
    // 功能栏 分页 添加框
    headFunction, pageTool, userAdd
  },
  created () {
    this.list()
  },
  data () {
    return {
      Function: '添加用户',
      FunctionName: '',
      page: {
        page: 1,
        pagesize: 10,
        counts: 0
      },
      listS: [],
      dialogVisible: false
    }
  },
  methods: {
    // 功能组件
    // 搜索
    async search (value) {
      console.log(value)
      const res = await list({
        username: value,
        page: this.page.page,
        pagesize: this.page.pagesize
      })
      console.log(res)
      this.listS = res.data.list
      this.page.counts = res.data.counts
    },
    // 子组件新增
    add () {
      this.$refs.editS.dialogVisible = true
      this.FunctionName = '添加用户1'
    },
    // 子组件刷新
    Refresh () {
      this.list()
    },
    // 获取用户列表
    async list () {
      const { data } = await list(this.page)
      // console.log(data)
      this.listS = data.list
      this.page.counts = data.counts
      console.log(this.listS)
    },
    // 分页
    handleCurrentChange (currentPage) {
      // console.log(currentPage)
      this.page.page = currentPage
      this.list()
    },
    handleSizeChange (pagesize) {
      // console.log(`每页 ${pagesize} 条`)
      this.page.pagesize = pagesize
      this.list()
    },
    // 操作按钮
    // 删除
    del (data) {
      // console.log(data)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const del = await remove(data)
          this.list()
          if (del.statusText === 'ok') {
            // console.log(del)
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 编辑
    edit (id) {
      console.log(id)
      // this.dialogVisible = true
      this.FunctionName = '编辑用户1'
      this.$refs.editS.dialogVisible = true
      // console.log(this.$refs.editS)
      this.$refs.editS.edit(id)
    }

  }
}

</script>

<style lang="scss" scoped>
.dashboard-container{
  margin: 20px;
  padding: 20px;
  background-color: #fff;
}
.main{
  margin-top:15px;
}
.block{
  padding: 10px;
}
</style>
